<script setup>
import HeaderView from "@/components/layout/HeaderView.vue";
import SidebarView from "@/components/layout/SidebarView.vue";

</script>

<template>
  <div class="layout">
    <div class="header">
      <HeaderView/>
    </div>
    <div class="content">
      <div class="sidebar">
        <SidebarView/>
      </div>
      <div class="main">
        <router-view/>
      </div>
    </div>
  </div>

</template>

<style scoped>
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  margin: 0;
  background-color: #333;
  color: #fff;
  height: 50px;
  padding: 0 20px;
}

.content {
  display: flex;
  flex-grow: 1;
}

.sidebar {
  width: 200px;
  background-color: #f2f2f2;
  height: 100%;
}

.main {
  flex-grow: 1;
  margin: 0;
  padding: 20px;
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
}

</style>
